<template>
  <div class="block">
    <a-modal v-model:visible="visible" :footer="false" :title="'编辑-' + activity.name || ''" :ok-loading="loading" fullscreen :destoy="true">
      <a-collapse :default-active-key="['1']">
        <a-collapse-item header="项目流程" key="1">
          <div>
            <div class="flex justify-between mb-4">
              <a-button type="primary" @click="addStep">新增流程</a-button>
            </div>
            <div v-for="(step, index) in stepForm" :key="index" class="mb-4 p-4 border rounded">
              <ma-form v-model="step.form" :columns="stepFormCol" :options="formOptions"/>
              <div v-for="(stepItem, _ik) in step.items" :key="_ik" class="mt-4 p-4 border rounded">
                <ma-form v-model="stepItem.form" :columns="stepItemForm"  :options="formOptions"/>
                <div class="flex justify-end mt-2">
                  <a-button type="primary" @click="addStepItem(index, _ik)" class="mr-2">新增步骤</a-button>
                  <a-button type="primary" status="danger" v-if="step.items.length > 1" @click="delStepItem(index, _ik)">删除步骤</a-button>
                </div>
              </div>
              <div class="flex justify-start mt-2">
                <a-button type="primary" status="danger" @click="delStep(index)">删除流程</a-button>
              </div>
            </div>
            <div class="flex justify-center mt-4">
              <a-button type="primary" @click="saveStep">保存项目流程</a-button>
            </div>
          </div>
        </a-collapse-item>

        <a-collapse-item header="教程流程" key="2">
          <div>
            <div class="flex justify-between mb-4">
              <a-button type="primary" @click="addJc">新增流程</a-button>
            </div>
            <div v-for="(jc, jc_id) in jcForm" :key="jc_id" class="mb-4 p-4 border rounded">
              <ma-form v-model="jc.form" :columns="jcFormCol" :options="formOptions"/>
              <div v-for="(jcItem, _jik) in jc.items" :key="_jik" class="mt-4 p-4 border rounded">
                <ma-form v-model="jcItem.form" :columns="jcItemForm"  :options="formOptions"/>
                <div class="flex justify-end mt-2">
                  <a-button type="primary" @click="addJcItem(jc_id, _jik)" class="mr-2">新增步骤</a-button>
                  <a-button type="primary" status="danger" v-if="jc.items.length > 1" @click="delJcItem(jc_id, _jik)">删除步骤</a-button>
                </div>
              </div>
              <div class="flex justify-start mt-2">
                <a-button type="primary" status="danger" @click="delJc(jc_id)">删除流程</a-button>
              </div>
            </div>
            <div class="flex justify-center mt-4">
              <a-button type="primary" @click="saveJc">保存教程流程</a-button>
            </div>
          </div>
        </a-collapse-item>
      </a-collapse>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { request } from "@/utils/request.js"
import { Message } from '@arco-design/web-vue'

const visible = ref(false)

const activity = ref({})
const loading = ref(false)
const formOptions = ref({
  layout: 'horizontal',
  showButtons: false,
})

const formTypeData = [
  { label: '无', value: 0 },
  // { label: '获取活动码', value: 1 },
  { label: '图片上传', value: 2 },
  { label: '输入框', value: 3 },
]
const stepFormCol = reactive([
  { title: '流程项', dataIndex: 'step_id', formType: 'select', dict: { url: 'prm/act_step/list?type=1', props: { label: 'title', value: 'id' }, translation: true } }
])
const stepItemForm = ref([
  // { title: 'ID', dataIndex: 'id', hide: true },
  { title: '步骤标题', dataIndex: 'title', formType: 'input', width: 80 },
  { title: '步骤内容', dataIndex: 'content', formType: 'editor', width: 80 },
  { title: '附件', dataIndex: 'files', width: 100, formType: 'upload', type: 'image',multiple: true },
  { title: '表单类型', dataIndex: 'form_type', width: 100, formType: 'select', dict: { data: formTypeData, translation: true } },
])

const stepForm = ref([
  // { form: { step_id: '' }, items: [{ form: { title: '', content: '', files: [], form_type: '0' } }] }
])

//教程
const jcFormCol = reactive([
  { title: '步骤选项', dataIndex: 'step_id', formType: 'select', dict: { url: 'prm/act_step/list?type=2', props: { label: 'title', value: 'id' }, translation: true } }
])
const jcItemForm = ref([
  // { title: 'ID', dataIndex: 'id', hide: true,formType:'input',type:'hidden' },
  { title: '步骤标题', dataIndex: 'title', formType: 'input', width: 80 },
  { title: '步骤内容', dataIndex: 'content', formType: 'editor', width: 80 },
])
const jcForm = ref([
  // { form: { step_id: '' }, items: [{ form: { title: '', content: ''}}] }
])

const open = (record) => {
  visible.value = true
  activity.value = record
  getActivityDetail()
}

const getActivityDetail = async () => {
  try {
    const ret = await request({
      url: 'prm/activity/getLcDetail',
      method: 'post',
      data: { id: activity.value.id }
    })
    if(ret.code !== 200){
      Message.error(ret.message)
      return
    }
    if(ret.data.step){
      stepForm.value = ret.data.step
    }
    if(ret.data.jc){
      jcForm.value = ret.data.jc
    }
    console.log(stepForm.value, jcForm.value)
  } catch (error) {
    console.error('获取活动详情失败:', error)
  }
}

const addStep = () => {
  stepForm.value.push({ form: { step_id: 0 }, items: [{ form: { title: '', content: '', files: [], form_type: 0 } }] })
}

const addStepItem = (stepIndex, itemIndex) => {
  stepForm.value[stepIndex].items.push({ form: { title: '', content: '', files: [], form_type: 0 } })
}

const delStep = (index) => {
  stepForm.value.splice(index, 1)
}

const delStepItem = (stepIndex, itemIndex) => {
  stepForm.value[stepIndex].items.splice(itemIndex, 1)
}
const saveStep = () => {
  // 保存逻辑
  console.log('保存步骤:', stepForm.value)

  // 保存逻辑
  request({
    url: 'prm/activity/saveLc',
    method: 'post',
    data: {act_id: activity.value.id, type:1 ,items: stepForm.value}
  }).then(res => {
    Message.success(res.message)
    getActivityDetail()
  })
}

//教程
const addJc = () => {
  jcForm.value.push({ form: { step_id: 0 }, items: [{ form: { title: '', content: '', files: [], form_type: 0 } }] })
}

const addJcItem = (stepIndex, itemIndex) => {
  jcForm.value[stepIndex].items.push({ form: { title: '', content: '', files: [], form_type: 0 } })
}

const delJc = (index) => {
  jcForm.value.splice(index, 1)
}

const delJcItem = (stepIndex, itemIndex) => {
  jcForm.value[stepIndex].items.splice(itemIndex, 1)
}

const saveJc = () => {
  // 保存逻辑
  console.log('保存步骤:', jcForm.value)

  request({
    url: 'prm/activity/saveLc',
    method: 'post',
    data: {act_id: activity.value.id, type:2,items: jcForm.value}
  }).then(res => {
    Message.success(res.message)
    getActivityDetail()
  })
}
defineExpose({ open })
</script>
